<template>
	<!-- 全真模拟-在线组卷-手动组卷【设置题型】 -->
	<view>
		<u-navbar back-icon-color="#fff" :isFixed="true" :border-bottom="false" title="设置时间" title-color="#FFFFFF">
			<template v-slot:right>
				<text class="confirm" @click="submit">确定</text>
			</template>
		</u-navbar>
		<view class="form-item-group">
			<view class="form-item" @click="pickerChose(1)">
				<view class="input-container">
					<text class="pre-text title">考试开始时间</text>
					<view class="pre-picker">
						<view class="seletorTime" :class="[timeClass[0]?'selectTxt':'']">{{startTime }}</view>
						<my-icon name="bd-next" style="font-size: 28upx;"></my-icon>
					</view>
				</view>
			</view>
			<view class="form-item" @click="pickerChose(2)">
				<view class="input-container">
					<text class="pre-text title">考试结束时间</text>
					<view class="pre-picker">
						<view class="seletorTime" :class="[timeClass[1]?'selectTxt':'']">{{ endTime }}</view>
						<my-icon name="bd-next" style="font-size: 28upx;"></my-icon>
					</view>
				</view>
			</view>
			<view class="form-item" @click="selectTime">
				<view class="input-container">
					<text class="pre-text title">
						时间设置
						<text class="preNode">(分钟)</text>
					</text>
					<view class="pre-picker">
						<view class="seletorTime selectTxt">{{ seletorTime }}</view>
						<my-icon name="bd-next" style="font-size: 28upx;"></my-icon>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="input-container">
					<text class="pre-text">考试名称</text>
					<my-icon size="22" name="x" v-if="clearIcon" @click="onClear" style="color: #c0c4cc;"></my-icon>
					<u-input :clearable="false" :class="[clearIcon?'nameInput':'']" @click="keyBord" @focus="keyBord" maxlength="15" v-model="examname" placeholder="请输入试卷名称" />
				</view>
			</view>
		</view>
		<!-- 年月日 -->
		<u-picker mode="time" :start-year="curYear" @confirm="confirm" v-model="startShow" :params="params"></u-picker>
		<!-- 时分秒 -->
		<u-picker :examSetTime="true" mode="time" :mask-close-able="false" @cancel="cancel2" @confirm="confirm2" v-model="hourShow" :params="params2"></u-picker>
		<!-- 时间选择 -->
		<u-picker mode="multiSelector" @confirm="confirm3" value="11" v-model="timeShow" :range="selector"></u-picker>
		<my-confirm ref="headBack" @cancel="backCancel()" @confirm="backSubmit()" confirm-text="确定" :cancelshow="false">
			<view class="subModal">
				<view class="subModalTit">温馨提示：<view>当前设置的考试开始时间-结束时间间隔小于<text class="red">{{this.seletorTime}}</text>分钟，请重新设置！</view></view>
			</view>
		</my-confirm>
	</view>
</template>

<script>
export default {
	data() {
		return {
			startShow: false, //年月日时间
			hourShow: false, //时分秒时间
			timeShow: false, //时间选择
			startTime: '选择时间', //开始时间
			endTime: '选择时间', //结束时间
			timeClass:[false,false],//时间是否选择
			timeType: 1, //类型
			selector: [], //时间设置
			seletorTime: 90, //时间段
			examname: '', //考试名称
			getData: '',
			params: {
				//年月日显示
				year: true,
				month: true,
				day: true
			},
			params2: {
				//时分秒显示
				hour: true,
				minute: true
			},
			clearIcon:false
		};
	},
	watch:{
		startTime(){
			this.timeClass[0]=this.startTime!="选择时间"?true:false
		},
		endTime(){
			this.timeClass[1]=this.endTime!="选择时间"?true:false
		},
		examname(){
			this.clearIcon=this.examname?true:false
		}
	},
	onLoad() {
		this.selectFuc();
		this.getData = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd hh:MM');
	},
	computed: {
		curYear() {
			return this.getData.substring(0, 4);
		}
	},
	methods: {
		// 开始时间
		pickerChose(type) {
			this.timeType = type;
			this.startShow = true;
		},
		// 选择时间短
		selectTime(e) {
			this.timeShow = true;
		},
		onClear(){
			this.examname="";
		},
		keyBord() {
			uni.pageScrollTo({
				scrollTop: 0
			});
		},
		confirm(e) {
			// 确定年月日
			this.startShow = false;
			this.hourShow = true;
			const choseTime = e.year + '-' + e.month + '-' + e.day;
			if (this.timeType == 1) {
				this.startTime = choseTime;
			} else {
				this.endTime = choseTime;
			}
		},
		confirm2(e) {
			// 确定时分秒
			const hourTime = e.hour + ':' + e.minute;
			this.getData = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd hh:MM');
			if (this.timeType == 1) {
				this.startTime = this.startTime + ' ' + hourTime;
				if (this.dateCompare(this.startTime, this.getData)) {
					this.startTime = '选择时间';
					uni.showToast({
						duration: 2000,
						title: '开始时间应晚于当前时间！',
						icon: 'none'
					});
				}
			} else {
				this.endTime = this.endTime + ' ' + hourTime;
				if (this.dateCompare(this.endTime, this.startTime)) {
					this.endTime = '选择时间';
					uni.showToast({
						duration: 2000,
						title: '结束时间应晚于开始时间！',
						icon: 'none'
					});
				}
			}
		},
		confirm3(e) {
			this.seletorTime = this.selector[0][e];
		},
		cancel2() {
			if (this.timeType == 1) {
				this.startTime = '选择时间';
			} else {
				this.endTime = '选择时间';
			}
		},
		// 遍历数据
		selectFuc() {
			var arr1 = new Array(101);
			const newArr = [];
			for (var i = 10; i < arr1.length; i++) {
				newArr.push(i);
			}
			this.selector.push(newArr, ['分钟']);
		},
		dateCompare(startDate, endDate) {
			// 计算截止时间
			startDate = startDate.replace('-', ':').replace('-', ':');
			// 计算详细项的截止时间
			endDate = endDate.replace('-', ':').replace('-', ':');
			if (startDate <= endDate) {
				return true;
			} else {
				return false;
			}
		},
		submit() {
			const time = (Date.parse(this.endTime.replace(/-/g, '/')) - Date.parse(this.startTime.replace(/-/g, '/')))/1000/60
			if (this.startTime!='选择时间' && this.endTime!='选择时间' && this.seletorTime && this.examname && time >= this.seletorTime){
				// 设置存储数据
				const setSess = {
					starttime: this.startTime, //开始时间
					endtime: this.endTime, //结束时间
					duration: this.seletorTime, //时长
					examname: this.examname, //试卷名称
					examtype: 0,
					paperid: 0,
					isquerandomorder: true, //考试模式
					isqueoprandomorder: true,
					studentlist: [], //学生
					studentName: [],
					noticeTitle: '', //通知标题
					noticeContent: '' //内容
				};
				//存试数据
				uni.setStorageSync('examStorage', setSess);
				uni.navigateTo({
					url: 'examSelect'
				});
			} else {
				if(time < this.seletorTime){
					this.$nextTick(function() {
						this.$refs.headBack.open();
	
					});
					return
					} else {
						uni.showToast({
							duration: 1000,
							title: '考试信息不得为空',
							icon: 'none'
						});
					}
			}
		},
		backCancel(){
			this.$nextTick(function() {
				this.$refs.headBack.close();
			});
		},
		backSubmit(){
			this.$nextTick(function() {
				this.$refs.headBack.close();
			});
		}
	}
};
</script>
<style>
page {
	background-color: #f5f5f5;
}
/deep/.options{
		display: flex;
		justify-content: center!important;
}
.subModalTit uni-view{
		margin-top: 38upx;
}
.subModalTit .red{
			color: #F45C4B;
		}
</style>
<style lang="scss" scoped>
.uni-input-placeholder {
	color: #a9abb0 !important;
}
.icon-x{
	position: absolute;
	right: 30upx;
	z-index: 100;
}
.confirm {
	font-size: 30upx;
	font-weight: 400;
	color: #ffffff;
	padding-right: 30upx;
}
.title {
	line-height: 100upx;
	font-size: 30upx;
	font-weight: 400;
	color: #636874;
	.preNode {
		color: #a9abb0;
	}
}
.seletorTime {
	color: #a9abb0 !important;
	font-size: 32upx;
	margin-right: 10upx;
}
.selectTxt {
	color: #363940 !important;
}
.form-item > * {
	padding: 0 30upx;
}
.input-container {
	display: flex;
	align-items: center;
	background-color: #ffffff;
	justify-content: space-between;
	.pre-picker {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.iconfont {
		color: #cccccc;
		font-size: 24upx;
	}
	text {
		font-size: 32upx;
		color: black;
	}
	.nameInput{
		padding-right: 30upx!important;
	}
	/deep/.u-input__input {
		height: 110upx;
		font-size: 32upx;
		text-align: right;
		position: relative;
		flex: 1;
	}
	uni-picker {
		// height: 110upx;
		line-height: 110upx;
		flex: 1;
		text-align: right;
	}
}
.form-item-group {
	margin-top: 20upx;
	background-color: #ffffff;
	.form-item {
		* {
			padding: 0;
		}
		margin: 0 30upx;
	}
	.form-item + .form-item {
		border-top: 1px solid #ebebeb;
	}
}
</style>
